<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="dataForm" class="searchform" inline label-width="80px">

        <el-form-item :label="$t('bs.department')" prop="cost_id" style="min-height: 46px">
          <el-select v-model="listQuery.dept_id">
            <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.department_name" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('bs.stream')" prop="cost_id">
          <el-select v-model="listQuery.cost_id" :disabled="!listQuery.dept_id">
            <el-option v-for="item in querycosts" :key="item.id" :value="item.id" :label="item.department_name" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('bs.productionLine')" prop="line_id">
          <el-select v-model="listQuery.line_id" :disabled="!listQuery.cost_id">
            <el-option v-for="item in querylines"  :key="item.id" :value="item.id" :label="item.department_name" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('bs.stationNumber')" prop="station_number">
          <el-input
            v-model="listQuery.station_number"
            class="filter-item"
            :placeholder="$t('bs.stationNumber')"
            style="width: 204px;"
            @keyup.enter.native="handleFilter"
          />
        </el-form-item>
        <el-form-item :label="$t('bs.assetNumber')" prop="inventory_no">
          <el-input
              v-model="listQuery.inventory_no"
              class="filter-item"
              :placeholder="$t('bs.assetNumber')"
              style="width: 204px;"
              @keyup.enter.native="handleFilter"
          />
        </el-form-item>

        <el-form-item :label="$t('bs.deviceName')" prop="station_name">
          <el-input
            v-model="listQuery.station_name"
            class="filter-item"
            :placeholder="$t('bs.deviceName')"
            style="width: 204px;"
            @keyup.enter.native="handleFilter"
          />
        </el-form-item>

        <el-form-item :label="$t('bs.supplier')" prop="supplier">
          <el-select v-model="listQuery.supplier_no" clearable>
            <el-option
              v-for="(item,k) in supplierList"
              :key="'b_'+k"
              :label="item.dict_value"
              :value="item.dict_key"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('bs.costCenter')" prop="url">
          <el-input
            v-model="listQuery.cost_center"
            class="filter-item"
            :placeholder="$t('bs.costCenter')"
            style="width: 204px;"
            @keyup.enter.native="handleFilter"
          />
        </el-form-item>

        <!--        <el-form-item label="设备品牌" prop="url">-->
        <!--          <el-input-->
        <!--              v-model="listQuery.dev_brand"-->
        <!--              class="filter-item"-->
        <!--              placeholder="设备品牌"-->
        <!--              style="width: 204px;"-->
        <!--              @keyup.enter.native="handleFilter"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <el-form-item :label="$t('bs.deviceType')" prop="url">
          <el-select v-model="listQuery.dev_type" clearable>
            <el-option
              v-for="(item,k) in dev_type_option"
              :key="'b_'+k"
              :label="item.dict_value"
              :value="item.dict_key"
            />
          </el-select>
        </el-form-item>

        <!--        <el-form-item label="当前版本" prop="url">-->
        <!--          <el-input-->
        <!--              v-model="listQuery.active_version"-->
        <!--              class="filter-item"-->
        <!--              placeholder="当前版本"-->
        <!--              style="width: 204px;"-->
        <!--              @keyup.enter.native="handleFilter"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <el-form-item :label="$t('bs.processType')" prop="url">
          <el-select v-model="listQuery.technology_type" clearable>
            <el-option
              v-for="(item,k) in technology_type_option"
              :key="'c_'+k"
              :label="item.technology_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button v-waves class="filter-item" @click="handleFilter">
            {{ $t('table.search') }}
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleFilterReset">
            {{$t('bs.reset')}}
          </el-button>
        </el-form-item>
        <!--        <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate">-->
        <!--          {{ $t('table.add') }}-->
        <!--        </el-button>-->
      </el-form>

    </div>

    <div
      style="padding: 2%;background: #ffffff;box-shadow: 0px 15px 24px 0px rgba(101,175,255,0.08);border-radius: 10px;"
    >
      <div style="display: flex;flex-direction: row;padding-bottom: 24px">
        <div style="flex: 1;display: flex;align-items: center">
          <el-button
            class="filter-item"
            plain
            size="small"
            style="margin-left: 10px;"
            type="primary"
            @click="handleCreate"
            v-bp="'/bs/sl_station/edit'"
          >
            {{$t("bs.add")}}
          </el-button>
          <el-button
            class="filter-item"
            plain
            size="small"
            style="margin-left: 10px;"
            type="primary"
            @click="handleDeleteAll"
            v-bp="'/bs/sl_station/edit'"
          >
            {{$t('bs.batchDelete')}}
          </el-button>
          <el-button
            class="filter-item"
            plain
            size="small"
            style="margin-left: 10px;"
            type="primary"
            @click="importExcel"
            v-bp="'/bs/sl_station/edit'"
          >
            导入
          </el-button>
          <el-upload
            ref="uploadRef"
            style="width: 0;height: 0;visibility: hidden"
            :data="updata"
            :headers="upheaders"
            name="filelist"
            :on-remove="()=>{showup=false}"
            multiple
            :on-progress="()=>{showup=true}"
            :action="upExcelUrl"
            :on-success="handleSuccess"
          />
        </div>
        <div style="flex: 1;display: flex;align-items: center;justify-content: flex-end">
          <el-popover
            v-model="tablesetvisible"
            placement="bottom-start"
            width="160"
          >
            <div class="setcheckbox">
              <el-checkbox v-model="checked" @change="checkall">全选/不选</el-checkbox>
              <el-checkbox v-for="(item,k) in fileds" :key="k" v-model="item.is_show" false-label="0" true-label="1">
                {{ item.title }}
              </el-checkbox>
            </div>
            <div slot="reference" class="hoverbutton">
              <img src="/static/table/fiter.png">
              <span style="margin-left: 8px;color: #666666">筛选</span>
            </div>
          </el-popover>
        </div>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
      >
        <el-table-column label="序号" width="55">
          <template slot-scope="{$index,row}">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column v-if="fileds.dept_id.is_show==1" :label="$t('bs.department')" min-width="100">
          <template slot-scope="{row}">
            {{ row.department_name }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.cost_id.is_show==1" :label="$t('bs.stream')"  min-width="100">
          <template slot-scope="{row}">
            {{ row.cost_name }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.line_id.is_show==1" :label="$t('bs.productionLine')"  min-width="100">
          <template slot-scope="{row}">
            {{ row.line_name }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.work_position.is_show==1" :label="$t('bs.workerNumber')"  min-width="100">
          <template slot-scope="{row}">
            {{ row.work_position }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.station_number.is_show==1" :label="$t('bs.stationNumber')"  min-width="100">
          <template slot-scope="{row}">
            {{ row.station_number }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.inventory_no.is_show==1" :label="$t('bs.assetNumber')"  min-width="100">
          <template slot-scope="{row}">
            {{ row.inventory_no }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.station_name.is_show==1" :label="$t('bs.deviceName')"  min-width="180">
          <template slot-scope="{row}">
            {{ row.station_name }}
          </template>
        </el-table-column>
        <!--        <el-table-column v-if="fileds.station_name_en.is_show==1" label="设备英文名">-->
        <!--          <template slot-scope="{row}">-->
        <!--            {{ row.station_name_en }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column v-if="fileds.supplier.is_show==1" :label="$t('bs.supplier')"   min-width="100">
          <template slot-scope="{row}">
            {{ row.supplier }}
          </template>
        </el-table-column>
        <el-table-column v-if="fileds.cost_center.is_show==1" :label="$t('bs.costCenter')" align="center"  min-width="100">
          <template slot-scope="{row}">
            {{ row.cost_center }}
          </template>
        </el-table-column>

        <el-table-column v-if="fileds.dev_type.is_show==1" :label="$t('bs.deviceType')" align="center"  min-width="150">
          <template slot-scope="{row}">
            {{ row.dev_type }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
          <template slot-scope="{row,$index}">
            <el-tooltip class="item" effect="dark" content="编辑"  v-bp="'/bs/sl_station/view'" placement="bottom-start">
              <el-button circle icon="el-icon-edit" size="small" @click="handleUpdate(row)" />
            </el-tooltip>
            <el-popconfirm
              title="确定删除吗？"

              @confirm="handleDelete([row.id])"
            >
              <el-tooltip slot="reference" class="item" effect="dark" content="删除" placement="bottom-start">
                <el-button
                  v-bp="'/bs/sl_station/view'"
                  circle
                  icon="el-icon-delete"
                  size="small"
                  style="margin-left: 8px"
                />
              </el-tooltip>
            </el-popconfirm>
            <el-tooltip class="item" effect="dark" content="复制" placement="bottom-start">
              <el-button
                v-bp="'/bs/sl_station/edit'"
                style="margin-left: 8px"
                circle
                icon="el-icon-magic-stick"
                size="small"
                @click="handleCopy(row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :limit.sync="listQuery.limit"
        :page.sync="listQuery.page_no"
        :total="total"
        @pagination="getList"
      />

    </div>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="dataForm" :model="temp" :rules="rules"   label-position="top">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="$t('bs.basicInformation')" name="first">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item :label="$t('bs.department')" prop="dept_id">
                  <el-select v-model="temp.dept_id">
                    <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.department_name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.stream')" prop="cost_id">
                  <el-select v-model="temp.cost_id">
                    <el-option v-for="item in costs" :key="item.id" :value="item.id" :label="item.department_name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.productionLine')" prop="line_id">
                  <el-select v-model="temp.line_id">
                    <el-option v-for="item in lines" :key="item.id" :value="item.id" :label="item.department_name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <!--          <el-col :span="12">-->
              <!--            <el-form-item :label="$t('bs.workerNumber')" prop="station_code">-->
              <!--              <el-input v-model="temp.station_code"/>-->
              <!--            </el-form-item>-->
              <!--          </el-col>-->
              <el-col :span="12">
                <el-form-item :label="$t('bs.stationNumber')" prop="station_number">
                  <el-input v-model="temp.station_number" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.workerNumber')" prop="work_position">
                  <el-input v-model="temp.work_position" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item :label="$t('bs.assetNumber')" prop="work_position">
                    <el-input v-model="temp.inventory_no" style="width:205px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item :label="$t('bs.deviceName')" prop="station_name">
                  <el-input v-model="temp.station_name" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备英文名" prop="station_name_en">
                  <el-input v-model="temp.station_name_en" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.supplier')" prop="supplier">
                  <el-select v-model="temp.supplier" clearable>
                    <el-option
                      v-for="(item,k) in supplierList"
                      :key="'b_'+k"
                      :label="item.dict_value"
                      :value="item.dict_key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.costCenter')" prop="cost_center">
                  <el-input v-model="temp.cost_center" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.productionLineCode')" prop="line_equipment_code">
                  <div style="display: flex">
                    <el-tooltip class="item" effect="dark" :content="temp.line_equipment_code" placement="bottom-start">
                    <el-input v-model="temp.line_equipment_code" :disabled="true" />
                    </el-tooltip>
                    <el-button icon="el-icon-edit" @click="checkCode" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.equipmentDrawingName')" prop="equipment_drawings">
                  <el-input v-model="temp.equipment_drawings" style="width:205px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('bs.deviceType')" prop="dev_type">
                  <el-select v-model="temp.dev_type">
                    <el-option
                      v-for="(item,k) in dev_type_option"
                      :key="k"
                      :label="item.dict_value"
                      :value="item.dict_key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <el-form-item :label="$t('bs.sort')" prop="px">-->
<!--                  <el-input v-model="temp.px" style="width:205px" type="number" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="当前版本" prop="active_version">-->
              <!--                  <el-input style="width:205px" v-model="temp.active_version"/>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="设备品牌" prop="dev_brand">-->
              <!--                  <el-input style="width:205px" v-model="temp.dev_brand"/>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="工艺" name="second">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item :label="$t('bs.processType')" prop="technology_type" label-position="top">
                  <el-select v-model="temp.technology_type">
                    <el-option
                      v-for="(item,k) in technology_type_option"
                      :key="k"
                      :label="item.technology_name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="margin-bottom: 16px;width: 100%;text-align: right">
                  <el-popover
                    placement="bottom-start"
                    trigger="click"
                    width="200"
                  >
                    <el-button slot="reference" size="mini">选择工艺细分</el-button>
                    <div>
                      <div class="el-checkbox-group el-transfer-panel__list">
                        <el-checkbox
                          v-for="(item,k) in station_Techonlogy"
                          :key="k"
                          class="el-transfer-panel__item"
                          @change="(val)=>{changeSubGy(k,val)}"
                        >{{ item.technology_name }}
                        </el-checkbox>
                      </div>

                    </div>
                  </el-popover>

                  <el-popconfirm
                    title="确定清空吗？"
                    @confirm="emptyListVal()"
                  >
                    <el-button slot="reference" size="mini" style="margin-left: 16px">清空</el-button>
                  </el-popconfirm>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="el-transfer-panel" style="width: 100%">
                  <div class="el-transfer-panel__header">
                    工艺细分
                  </div>
                  <div class="el-transfer-panel__list">

                    <div
                      v-for="(item,key) in station_Techonlogy"
                      v-if="temp.technology.indexOf(item.id)!=-1"
                      :key="key"
                      class="el-card is-hover-shadow"
                      style="margin: 5px"
                    >
                      <div style="display: flex;align-items: center;padding: 2px 5px;">
                        <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                          {{ item.technology_name }}
                        </p>
                        <div style="margin-left: 16px">
                          <el-popconfirm
                            title="确定删除吗？"
                            @confirm="delListVal(item.id)"
                          >
                            <el-button slot="reference" circle icon="el-icon-delete" />
                          </el-popconfirm>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="扩展属性" name="third">
            <el-row :gutter="24">

              <div style="margin-bottom: 16px;text-align: right;display: none">
                <el-popover
                  placement="bottom-start"
                  title="勾选添加属性"
                  trigger="click"
                  width="200"
                >
                  <el-button slot="reference" size="mini">添加属性</el-button>
                  <div>
                    <div class="el-checkbox-group el-transfer-panel__list">
                      <el-checkbox
                        v-for="(item,k) in station_attr"
                        :key="k"
                        class="el-transfer-panel__item"
                        @change="(val)=>{changeAttr(k,val)}"
                      >{{ item.name }}
                      </el-checkbox>
                    </div>
                  </div>
                </el-popover>
              </div>
              <el-col v-for="(item,kk) in temp.attrinfo" :key="kk" :span="item.inc_type=='3'?24:12">
                <el-form-item :label="item.name">
                  <el-input
                    v-if="item.inc_type!='2'"
                    v-model="item.attr_val"
                    :type="item.inc_type=='3'?'textarea':'text'"
                  />
                  <el-select v-else v-model="item.attr_val">
                    <el-option v-for="(t,k) in item.list_val" :key="'a_'+k" :label="t.label" :value="t.label" />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('bs.fileTemplate')" name="fourth">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="MAE Info">
                  <el-select v-model="temp.mea_id">
                    <el-option
                      v-for="(item,k) in mea_list"
                      :key="k"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="Process">
                  <el-select v-model="temp.process_id">
                    <el-option
                      v-for="(item,k) in process_list"
                      :key="k"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="Maintenance">
                  <el-select v-model="temp.maintenance_id">
                    <el-option
                      v-for="(item,k) in maintenance_list"
                      :key="k"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="Spare parts">
                  <el-select v-model="temp.spare_id">
                    <el-option
                      v-for="(item,k) in spare_list"
                      :key="k"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary"  v-bp="'/bs/sl_station/edit'" @click="dialogStatus==='create'?createData():updateData()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="attClose"
      :visible.sync="attVisible"
      title="选择属性"
      width="800px"
    >
      <div>
        <el-radio-group v-model="radio1">
          <el-radio-button label="文本" />
          <el-radio-button label="列表" />
          <el-radio-button label="长文本" />
        </el-radio-group>
        <div class="el-transfer-panel__list el-card" style="padding: 10px;height: 400px">
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-bottom: 5px">
            <div style="display: flex;align-items: center;">
              <el-checkbox />
              <p style="flex: 1;margin-left: 16px;padding:0px 8px">
                工艺细分条目
              </p>
            </div>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="attVisible = false">取 消</el-button>
        <el-button type="primary" @click="attVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, fetchPv, createArticle, updateArticle, delArticle } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import CyTreeSelect from '@/components/CyTreeSelect' // secondary package based on el-pagination
import { getDepartmentTree, getDepartment, getlines, getcost, getDepartmentOne } from '@/api/department'
import { buildCode, fetchDict } from '@/api/common'
import { getTechonlogyCat } from '@/api/technology'
import { getStationAttr, setStation, getStationGyxf, getStationAttrInfo } from '@/api/station'
import { getToken } from '@/utils/auth'

const cityOptions = ['文本', '列表', '长文本']
export default {
  name: 'SlStation',
  components: { CyTreeSelect, Pagination },
  directives: { waves },
  data() {
    return {
      radio1: '文本',
      activeName: 'first',
      checked: true,
      tablesetvisible: false,
      tableKey: 0,
      list: null,
      attVisible: false,
      total: 0,
      listLoading: true,
      listQuery: {
        page_no: 1,
        limit: 20,
        sort: 'station_number asc',
        where: {}
      },
      queryMap: {
        technology_type:"=",
        dev_type:"="
      },
      showReviewer: false,
      temp: {
        id: '',
        dept_id: '',
        dept_name:'',
        cost_id: '',
        cost_name:'',
        line_id: '',
        dept_sn: '',
        line_sn: '',
        line_name: '',
        px:50,
        work_position: '',
        // station_code: '',
        station_number: '',
        station_name: '',
        station_name_en: '',
        supplier: '',
        cost_center: '',
        line_equipment_code: '',
        equipment_drawings: '',
        dev_type: '',
        active_version: '',
        email_send_status: '',
        technology_type: '',
        technology: [],
        dev_brand: '',
        del_flag: '',
        add_user_id: '',
        add_time: '',
        attrinfo: [],
        mea_id: '',
        process_id: '',
        maintenance_id: '',
        spare_id: '',
        inventory_no:'',

      },
      fileds: {
        dept_id: { filed: 'dept_id', title: '部门', is_show: '1' },
        cost_id: { filed: 'cost_id', title: '价值流', is_show: '1' },
        line_id: { filed: 'line_id', title: '产线', is_show: '1' },
        work_position: { filed: 'work_position', title: '工作位号', is_show: '1' },
        station_number: { filed: 'station_number', title: '站号', is_show: '1' },
        inventory_no:{ filed: 'inventory_no', title: '资产编号', is_show: '1' },
        station_name: { filed: 'station_name', title: '设备名称', is_show: '1' },
        // station_name_en: {filed: 'station_name_en', title: '设备英文名', is_show: '1'},
        supplier: { filed: 'supplier', title: '供应商', is_show: '1' },
        cost_center: { filed: 'cost_center', title: '成本中心', is_show: '1' },
        // line_equipment_code: {filed: 'line_equipment_code', title: '生产线设备代码', is_show: '1'},
        // equipment_drawings: {filed: 'equipment_drawings', title: '设备图纸名称', is_show: '1'},
        dev_type: { filed: 'dev_type', title: '设备类型', is_show: '1' }
        // active_version: {filed: 'active_version', title: '当前版本', is_show: '1'},
        // technology_type: {filed: 'technology_type', title: '工艺类型', is_show: '1'},
        // technology: {filed: 'technology', title: '工艺', is_show: '1'},
        // dev_brand: {filed: 'dev_brand', title: '设备品牌', is_show: '1'}
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
       update: this.$t("bs.edit"),
        create: this.$t("bs.add")
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        dept_id: [{ required: true, message: '产线不能为空', trigger: 'change' }],
        //      station_code: [{required: true, message: '工作位号不能为空', trigger: 'change'}],
        station_number: [{ required: true, message: '站号不能为空', trigger: 'change' }],
        station_name: [{ required: true, message: '设备名称不能为空', trigger: 'change' }],
        station_name_en: [{ required: true, message: '设备英文名不能为空', trigger: 'change' }],
        // supplier: [{required: true, message: '供应商不能为空', trigger: 'change'}],
        // cost_center: [{required: true, message: '成本中心不能为空', trigger: 'change'}],
        line_equipment_code: [{ required: true, message: '生产线设备代码不能为空', trigger: 'change' }],
        // equipment_drawings: [{required: true, message: '设备图纸名称不能为空', trigger: 'change'}],
        dev_type: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
        // active_version: [{required: true, message: '当前版本不能为空', trigger: 'change'}],
        technology_type: [{ required: true, message: '工艺类型不能为空', trigger: 'change' }],
        // technology: [{required: true, message: '工艺不能为空', trigger: 'change'}],
        // dev_brand: [{required: true, message: '设备品牌不能为空', trigger: 'change'}],
        mea_id: [{ required: true, message: '请选择 mea 模板', trigger: 'change' }],
        process_id: [{ required: true, message: '请选择 process 模板', trigger: 'change' }],
        maintenance_id: [{ required: true, message: '请选择 maintenances 模板', trigger: 'change' }],
        spare_id: [{ required: true, message: '请选择 spare 模板', trigger: 'change' }]
      },

      mea_list: [],
      process_list: [],
      maintenance_list: [],
      spare_list: [],
      downloadLoading: false,
      departmentTree: [],
      dev_type_option: [],
      technology_type_option: [],
      station_attr: [],
      station_Techonlogy: [],
      lines: [],
      querylines: [],
      costs: [],
      querycosts: [],
      depts: [],
      supplierList: [],
      upheaders: {},
      updata: {},
      showup: false,
      types: []
    }
  },
  computed:{
    upExcelUrl:{
      get:function (){
        return process.env.VUE_APP_BASE_URL+'/api/station/excel_import'
      }
    }
  },
  watch: {
    'temp.dept_id': {
      async handler(newval, oldval) {
        if (oldval && newval != oldval) {
          console.log('旧值', oldval)
          this.temp.cost_id = ''
          this.temp.line_id = ''

        }

        if (newval) {
          const tempCosts = await getcost(newval)
          console.log(tempCosts)
          this.costs = tempCosts.data.items
          getDepartmentOne(newval).then((res) => {
            console.log('新部门值', res)
            this.temp.dept_sn = res.data.dept_sn
          })
          console.log('当前选选中的产线', this.temp.line_id)
        }
      }
    },
    'temp.line_id': {
      async handler(newval, oldval) {
          getDepartmentOne(newval).then((res) => {
              console.log('新部门值', res)
              this.temp.line_sn = res.data.dept_sn
          })
      }
    },
    'listQuery.dept_id': {
      async handler(newval, oldval) {
        if (oldval && newval != oldval) {
          console.log('旧值', oldval)
          this.listQuery.cost_id = ''
          this.listQuery.line_id = ''
        }

        if (newval) {
          const tempCosts = await getcost(newval)
          this.querycosts = tempCosts.data.items
        }
      }
    },
    'temp.cost_id': {
      async handler(newval, oldval) {
        if (oldval && newval != oldval) {
          console.log('有旧值')
          this.temp.line_id = ''
        }
        if (newval) {
          const tempCosts = await getlines(newval)
          this.lines = tempCosts.data.items
          console.log('当前选选中的产线', this.temp.line_id)
        }
      }
    },
    'listQuery.cost_id': {
      async handler(newval, oldval) {
        if (oldval && newval != oldval) {
          console.log('旧值', oldval)
          this.listQuery.line_id = ''
        }

        if (newval) {
          const tempCosts = await getlines(newval)
          this.querylines = tempCosts.data.items
        }
      }
    },

    'temp.technology_type': {
      async handler(newval) {
        if (newval) {
          this.changeGy(newval)
        }
      }
    }

  },
  mounted() {
    this.setTplOption()
  },
  created() {
    console.log('cccc')
    this.getList()
    this.getOption()
  },
  methods: {
    async setTplOption() {
      this.mea_list = await this.getTpl('MAE Info')

      console.log('mea_list的集合', this.mea_list,this.temp.mea_id)
      this.process_list = await this.getTpl('Process')

      this.maintenance_list = await this.getTpl('Maintenance')
      this.spare_list = await this.getTpl('Spare parts')
      this.$nextTick(()=>{
        this.temp.mea_id=this.mea_list[0].id
        this.temp.process_id=this.process_list[0].id
        this.temp.maintenance_id=this.maintenance_list[0].id
        this.temp.spare_id=this.spare_list[0].id
      })

    },
    async getTpl(inc_type) {
      var query = {
        page_no: 1,
        limit: 2000,
        sort: 'id desc',
        where: {
          and: [{ field: 'inc_type', operator: '=', value: inc_type }, { field: 'is_public', operator: '=', value: '0' }]
        }
      }
      const res = await fetchList(query, 'sl_doc_template')
      console.log(inc_type, res.data.items)

      return res.data.items
    },

    handleClick() {

    },
    checkCode() {
      if (!this.temp.dept_sn) {
        this.$message.error('请先选择部门')
        return
      }
      if (!this.temp.cost_center) {
        this.$message.error('请输入成本中心')
        return
      }
      if (!this.temp.line_sn) {
        this.$message.error('请先选择产线')
        return
      }
      if (!this.temp.station_number) {
        this.$message.error('请输入站号')
        return
      }
      if (!this.temp.work_position) {
        this.$message.error('请输入工作位号')
        return
      }
      if (!this.temp.supplier) {
        this.$message.error('请输入供应商代号')
        return
      }

      const data = {
        dept: this.temp.dept_sn,
        cost: this.temp.cost_center,
        line: this.temp.line_sn,
        station_number: this.temp.station_number,
        work_position: this.temp.work_position,
        supplier_no: this.temp.supplier
      }

      buildCode(data).then((res) => {
        console.log('数据', res)
        this.$message.success('获取代码成功')
        this.temp.line_equipment_code = res.data
      })
    },
    handleSuccess(res1) {
      this.$message.info(res1.msg)
    },
    importExcel(item) {
      this.upheaders = {
        AccessToken: getToken()
      }

      this.updata = {
        // doc_id: item.id,
        // station_id: this.station_id
      }
      this.$refs.uploadRef.$refs['upload-inner'].$refs.input.click()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    changeAttr(index, val) {
      console.log('原属性', this.temp.attrinfo)
      if (val) {
        const temp = this.temp.attrinfo.filter((item) => {
          return item.attr_id == this.station_attr[index].attr_id
        })
        if (temp.length == 0) {
          this.temp.attrinfo.push(this.station_attr[index])
        }
      } else {
        this.temp.attrinfo = _.cloneDeep(this.temp.attrinfo.filter(item => {
          return item.attr_id !== this.station_attr[index].attr_id
        }))
      }
      console.log('属性', this.temp.attrinfo)
    },
    changeSubGy(index, val) {
      var has = this.temp.technology.indexOf(this.station_Techonlogy[index].id) == -1
      if (val) {
        if (has) {
          if (!this.temp.technology) {
            this.temp.technology = []
          }
          this.temp.technology.push(this.station_Techonlogy[index].id)
        }
      } else {
        if (!has) {
          this.delListVal(this.station_Techonlogy[index].id)
        }
      }
      console.log(index, val)
    },
    changeGy(val) {
      this.station_Techonlogy = []
      this.getGyxf(val)
    },
    getGyxf(parent_id) {
      getTechonlogyCat(parent_id).then((res) => {
        this.station_Techonlogy = res.data.items
      })
    },
    attClose() {

    },
    delListVal(id) {
      this.temp.technology = _.cloneDeep(this.temp.technology.filter(item => {
        return item != id
      }))
    },
    addListVal() {
      this.attVisible = true
    },
    emptyListVal() {
      this.temp.technology = []
    },
    getOption() {
      getDepartmentTree().then((res) => {
        if (res.data) {
          this.departmentTree = res.data
        }
      })
      fetchDict('dev_type').then((res) => {
        if (res.data.items) {
          this.dev_type_option = res.data.items
        }
      })
      fetchDict('供应商').then((res) => {
        if (res.data.items) {
          this.supplierList = res.data.items.filter(item=>item.dict_key)
        }
      })
      getStationAttr().then((res) => {
        if (!res.data.items) {
          res.data.items = []
        }
        console.log('公有属性', res)
        res.data.items.forEach((item) => {
          if (item.inc_type == '2') {
            if (item.list_val) {
              item.list_val = JSON.parse(item.list_val)
            } else {
              item.list_val = []
            }
          }
          item['attr_id'] = item['id']
          item['attr_val'] = ''
        })
        this.station_attr = res.data.items
        this.temp.attrinfo = res.data.items
      })
      getTechonlogyCat().then((option) => {
        if (!option.data.items) {
          option.data.items = []
        }
        option.data.items.unshift({
          id: '', technology_name: '无', parent_id: '0'
        })
        this.technology_type_option = option.data.items.filter(obj => obj.parent_id === '0')
        console.log('工艺类型', this.technology_type_option)
      })
      getDepartment().then((res) => {
        console.log('部门', res.data.items)
        this.depts = res.data.items
      })
    },
    checkall(val) {
      let check = '1'
      if (!val) {
        check = '0'
      }
      const keys = Object.keys(this.fileds)
      keys.map((item) => {
        this.fileds[item].is_show = check
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery, 'sl_view_station').then(response => {
        if (response.data && response.data.items) {
          this.list = response.data.items
          this.total = response.data.count
        }
        this.listLoading = false
      })
    },
    handleFilterReset() {
      this.listQuery = {
        page_no: 1,
        limit: 20,
        sort: 'station_number asc',
        where: {}
      }
      this.getList()
    },
    handleFilter() {
      const ext_keys = ['limit', 'where', 'page_no', 'sort']
      this.listQuery.page_no = 1
      const queryParma = {}
      const listkeys = Object.keys(this.listQuery)

      for (const i in listkeys) {
        if (ext_keys.indexOf(listkeys[i]) == -1 && this.listQuery[listkeys[i]]) {
          console.log('查询', listkeys[i], isNaN(listkeys[i]))
          let operator = '='
          let value = this.listQuery[listkeys[i]]
          if (!this.queryMap[listkeys[i]]) {
            if (isNaN(listkeys[i])) {
              operator = 'like'
              value = '%' + this.listQuery[listkeys[i]] + '%'
            }
            if (!queryParma['and']) {
              queryParma['and'] = []
            }
            queryParma['and'].push({ field: listkeys[i], operator: operator, value: value })
          } else {
            if (this.queryMap[listkeys[i]] == 'like') {
              operator = 'like'
              value = '%' + this.listQuery[listkeys[i]] + '%'
            }
            if (!queryParma['and']) {
              queryParma['and'] = []
            }
            queryParma['and'].push({ field: listkeys[i], operator: operator, value: value })
          }
        }
      }
      this.list = []
      this.listQuery['where'] = queryParma
      this.getList()
    },

    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        id: '',
        dept_id: '',
        cost_id: '',
        line_id: '',
        //  station_code: '',
        station_number: '',
        station_name: '',
        station_name_en: '',
        supplier: '',
        cost_center: '',
        line_equipment_code: '',
        equipment_drawings: '',
        inventory_no:'',
        dev_type: '',
        px:50,
        active_version: '',
        email_send_status: '',
        technology_type: '',
        technology: [],
        dev_brand: '',
        del_flag: '',
        add_user_id: '',
        add_time: '',
        attrinfo: [],
        mea_id: '',
        process_id: '',
        maintenance_id: '',
        spare_id: ''
      }
    },
    handleCreate() {
      console.log('创建时的属性值', this.temp.attrinfo)
      this.resetTemp()
      this.getOption()
      this.dialogStatus = 'create'
      this.setTplOption();
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const attr_data = this.temp.attrinfo
          console.log('工艺data', this.temp.technology)
          const technology_data = this.temp.technology
          console.log(technology_data)
          const data = {
            station_data: _.cloneDeep(this.temp),
            attr_data: attr_data,
            action: 1,
            technology_data: technology_data
          }
          data.station_data.technology = ''
          setStation(data).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          })
          this.list = []
          this.getList()
        } else {
          this.$message.error('请检查所有输入项')
        }
      })
    },
    async handleCopy(row) {
      this.temp = Object.assign({}, row) // copy obj
      // 还原工艺细分
      getStationGyxf(this.temp.id).then((res) => {
        console.log('工艺细分', res)
        if (res.data.items) {
          this.temp.technology = res.data.items.map((item) => {
            return item.technology_id
          })
        }

        // this.temp.technology=res.data.items
      })

      const attr = _.cloneDeep(this.station_attr)
      this.temp.attrinfo = attr
      // 还原扩展属性
      getStationAttrInfo(this.temp.id).then((res) => {
        console.log('基本属性', attr)
        if (res.data.items) {
          attr.forEach((item) => {
            var has = res.data.items.filter(it => it.attr_id == item.attr_id)
            if (has) {
              item.attr_val = has.attr_val
            }
          })
        }

        this.temp.attrinfo = attr
      })

      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.temp.id = ''
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    async handleUpdate(row) {
      // 还原价值流
      // if(row.cost_id){
      //   let tempCosts = await getcost(row.cost_id);
      //   this.costs = tempCosts.data.items
      // }
      // if(row.line_id)
      // {
      //   let tempCosts = await getlines(row.line_id);
      //   this.lines = tempCosts.data.items
      //
      // }
      // 还原产线
      this.temp = Object.assign(this.temp, row) // copy obj
      // 还原工艺细分
      getStationGyxf(this.temp.id).then((res) => {
        console.log('工艺细分', res)
        if (res.data.items) {
          this.temp.technology = res.data.items.map((item) => {
            return item.technology_id
          })
        }
        // this.temp.technology=res.data.items
      })

      const attr = _.cloneDeep(this.station_attr)
      this.temp.attrinfo = attr
      // 还原扩展属性
      getStationAttrInfo(this.temp.id).then((res) => {
        if (res.data.items) {
          attr.forEach((item) => {
            var has = res.data.items.filter(it => it.attr_id == item.attr_id)
            console.log('找到没', has)
            if (has && has.length > 0) {
              item.attr_val = has[0].attr_val
              console.log('修改' + item.attr_val)
            }
          })
        }
        console.log('修改后的attr', attr)
        this.temp.attrinfo = attr
      })

      this.dialogStatus = 'update'
      this.dialogFormVisible = true

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const attr_data = this.temp.attrinfo
          console.log('data', this.temp.technology)
          const technology_data = this.temp.technology
          console.log(technology_data)
          const data = {
            station_data: _.cloneDeep(this.temp),
            attr_data: attr_data,
            action: 0,
            technology_data: technology_data
          }
          data.station_data.technology = ''
          setStation(data).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          })
          this.list = []
          this.getList()
        } else {
          this.$message.error('请检查所有输入项')
        }
      })
    },
    handleDeleteAll() {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择需要删除的数据')
        return
      }
      this.$confirm('你确定删除这' + this.multipleSelection.length + '条数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.handleDelete(this.multipleSelection.map(item=>item.id))
      })
    },
    handleDelete(ids) {
      delArticle({ id: ids.join(',') }, 'sl_station').then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData
        this.dialogPvVisible = true
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
<style scoped="scoped" type="scss">
.pagination-container {
  padding: 0px;
  padding-bottom: 16px;
}

.hoverbutton {
  width: 70px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  border-radius: 3px;
}

.hoverbutton:hover {
  border: 1px solid #999999;
}

.setcheckbox .el-checkbox {
  margin-bottom: 10px;
}

.searchform .el-form-item {
  margin-bottom: 0px;
  min-width: 280px;
}

.el-card__body {
  padding: 10px !important;
}
</style>

